<template>
	<div class="mine-container">
		<myNavbar title="地图选点"></myNavbar>
		<div style="align-items: center">
			<eeui-amap style="width:750px;height:650px" @zoomchange="zoomchange" @dragend="dragend" :sdkKey="{ios:'677ad7ac6951597c1796824d2a5147fa','android':'1917474dc5a14b870b5071f76bdf13fe'}"
			 :zoom="16" :center="center" geolocation="true" myLocationEnabled="true" showMyLocation="true">
				<!-- <eeui-amap-marker :position="center" ></eeui-amap-marker> -->
			</eeui-amap>
			<!-- <icon class="icon amapcover" content="ios-pin" ref="amapcover"></icon> -->
			<image src="http://rzico.oss-cn-shenzhen.aliyuncs.com/img/dingwei.png" class="icon amapcover" ref="amapcover"></image>
		</div>
		<div class="search_input_content" @click="searchClick">
			<div class="search_input">
				<icon class="icon search_icon" content="tb-search" fontSize="38"></icon>
				<input class="search_input_inner" placeholder="请输入地点" :value="address" v-model="address" />
			</div>
			<div class="search_btn" @click="searchSubmit">
				<text class="selectAreabtn-text-Two">搜索</text>
			</div>
		</div>
		<div class="selectArea-contain-list">
			<scroll-view ref="reflectName" class="reflectName">
				<div v-for="(item,index) in addressList" :key="index" class="selectArea-contain-cell" @click="addressClick(item)">
<!--					<icon class="icon" content="ios-pin"></icon>-->
                    <text class="iconFont">&#xe62d;</text>
					<div class="selectArea-contain-div">
						<text class="selectArea-contain-name">{{item.name}}</text>
						<text class="selectArea-contain-address">{{item.address}}</text>
					</div>
					<icon class='checked' content="md-checkmark" v-if="item.checked"></icon>
				</div>
			</scroll-view>
		</div>
		<div class="btn selectAreabtn" @click="submit">
			<text class="selectAreabtn-text">确认选点</text>
		</div>
	</div>
</template>
<script>
	import {
		poiLocation,
		poiQuery
	} from "../../api/amap";

    import myNavbar from "../../components/myNavbar/myNavbar";
    import gps from "../../utils/gps";
	const amap = app.requireModule("eeui/amap");
	const eeui = app.requireModule('eeui');
	const geolocation = app.requireModule("eeui/geolocation");
	const animation = weex.requireModule('animation')

	export default {
		name: "address",
		components: {
			myNavbar
		},
		data() {
			return {
				center: [],
				lng: null,
				lat: null,
				point: {
					position: [],
					title: "This is a marker",
				},
				addressList: [],
				selectAddress: ""
			};
		},
		created() {
			// 在实例创建完成后被立即调用

            this.initIconFont()
		},

		mounted() {
            let _this = this;
            geolocation.get((ret) => {
                console.info("定位ret--" + JSON.stringify(ret));
                _this.lng = ret.longitude;
                _this.lat = ret.latitude;
                let center = []
                let postion = gps.gcj_encrypt(_this.lat,_this.lng);
                _this.lat = postion.lat;
                _this.lng = postion.lng;
                center[0] = _this.lng
                center[1] = _this.lat
                this.center = center
                _this.getBuilding();
            });
		},

		methods: {
			getBuilding() {
				let _this = this;
				let data = {};
				data.lng = this.lng;
				data.lat = this.lat;
				poiLocation(data)
					.then((res) => {
						let addressList = [];
						if (res.type == "success") {
							if (res.data.pois.length > 0) {
								// console.log("res.data.pois.length--" + res.data.pois.length);
								res.data.pois.map((item) => {
									item.checked = false
								})
								this.addressList = res.data.pois;
							}
						}
					})
					.catch((error) => {
						console.log(error);
					});
			},

			getAddress(callback) {
				let _this = this;
				let data = {
					lat: this.lat,
					lng: this.lng,
					keyword: this.address
				};

				poiQuery(data)
					.then((res) => {
						let addressList = [];
						if (res.type == "success") {
							if (res.data.pois.length > 0) {
								this.addressList = res.data.pois;
							}
							if (callback) {
								callback()
							}
						}
					})
					.catch((error) => {
						console.log(error);
					});
			},

			zoomchange(e) {
				// console.info("用户缩放地图时触发该事件" + JSON.stringify(e));
			},

			dragend(e) {
				let _this = this;
				this.lng = e.center.longitude;
				this.lat = e.center.latitude;
				_this.getBuilding();
				this.locationAnimation()
			},

			submit() {
				if (this.isNull(this.selectAddress)) {
					eeui.toast({
						message: "请点击选择地址",
					});
				} else {
					eeui.setCaches('address', this.selectAddress, 0)
					eeui.closePage({
						pageName: "selectArea"
					})
				}

			},

			addressClick(data) {
				let center = []
				center[0] = data.location.split(",")[0]
				center[1] = data.location.split(",")[1]
				this.center = center
				if (this.addressList.length > 0) {
					this.addressList.map((item) => {
						if (item.id == data.id) {
							item.checked = true
							this.selectAddress = item
							this.locationAnimation()
						} else {
							item.checked = false
						}
					})
				}
			},

			searchSubmit() {
				let _this = this
				if (this.isNull(this.address)) {
					eeui.toast({
						message: "请输入搜索地点",
					});
				} else {
					this.getAddress(() => {
						_this.$refs.reflectName.scrollToPosition(0);
					})

				}
			},

			//执行定位的动画
			locationAnimation() {
				let _this = this
				animation.transition(_this.$refs.amapcover, {
					styles: {
						transform: 'translate(0px, -30px)',
					},
					duration: 400, //ms
					timingFunction: 'ease-out',
					needLayout: false,
					delay: 0 //ms
				})
				setTimeout(() => {
					animation.transition(_this.$refs.amapcover, {
						styles: {
							transform: 'translate(0px, 30px)',
						},
						duration: 400, //ms
						timingFunction: 'ease-out',
						needLayout: false,
						delay: 0 //ms
					})
				}, 400);
			}
		},
	};
</script>

<style scoped>
	@import url("../../../style/wx.css");

	.icon {
		width: 40px;
		height: 40px;
	}

	.mine-container {
		flex: 1;
		display: flex;
		flex-direction: column;
		background-color: rgba(248, 248, 248, 0.8);
	}

	.top {
		/* height:730px */
	}

	.amapcover {
		position: absolute;
		width: 60px;
		height: 60px;
		left: 345px;
		top: 280px;
		animation: myfirst 0.5s 3;
	}

	@keyframes myfirst {
		0% {
			transform: translate(0px, 0px);
		}

		50% {
			transform: translate(0px, -10px);
		}

		100% {
			transform: translate(0px, 0px);
		}
	}

	.selectArea-contain {
		margin-bottom: 120px;
		border-style: solid;
		border-width: 1px;
		border-color: #000;
	}

	.selectArea-contain-top {
		/* flex: 1; */
	}

	.selectArea-contain-list {
		flex: 1;
		width: 750px;
		justify-content: center;
		padding: 0 20px;
	}

	.reflectName {
		flex: 1;
	}

	.selectArea-contain-cell {
		width: 700px;
		/*height: 100px;*/
		border-bottom-style: solid;
		border-bottom-width: 2px;
		border-bottom-color: rgba(216, 216, 216,0.5);
		/* display: flex; */
		flex-direction: row;
		align-items: center;
		padding-left: 20px;
        padding-top: 30px;
        padding-bottom: 30px;
	}

	.selectArea-contain-div {
		flex: 1;
	}

	.selectArea-contain-name {
		font-size: 30px;
		text-overflow: ellipsis;
		lines: 1;
	}

	.selectArea-contain-address {
		margin-top: 10px;
		font-size: 24px;
		text-overflow: ellipsis;
		lines: 1;
	}

	.checked {
		width: 60px;
		height: 60px;
		color: #ff0000;
		font-size: 60px;
	}



	.search_input_content {
		width: 710px;
		height: 70px;
		/* border: 1px solid rgba(212, 215, 220, 1); */
		opacity: 0.95;
		border-radius: 50px;
		display: flex;
		margin-left: 20px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: white;
		overflow: hidden;
		margin-top: 20px;
		/*margin-bottom: 20px;*/
	}

	.search_icon {
		/* flex-basis: 50px; */
	}

	.search_input {
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding-left: 20px;
	}

	.search_input_inner {
		flex: 1;
		margin-left: 10px;
		height: 60px;
	}

	.search_btn {
		width: 120px;
		height: 70px;
		align-items: center;
		justify-content: center;
		border-left-style: solid;
		border-left-width: 1px;
		border-left-color: rgba(194, 194, 194,0.5);
	}

	.selectAreabtn {
		bottom: 0px;
		align-items: center;
		justify-content: center;
		margin: 10px 20px;
		border-radius: 16px;
		width: 710px;
		height: 80px;
		background-color: #409EFF;
	}

	.selectAreabtn-text {
		font-size: 32px;
		letter-spacing: 5px;
        color:white;
	}
    .selectAreabtn-text-Two{
        font-size: 32px;
        letter-spacing: 5px;
        color:black;
    }
    .iconFont{
        font-family: iconfont2;
        font-size: 60px;
    }
</style>
